<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard - 商品管理系统</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">

    <!-- Bootstrap Icons -->
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.11.0/font/bootstrap-icons.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 2rem 0;
            padding-top: 90px; /* 为导航栏留出空间 */
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        /* 导航栏样式 */
        .top-navbar {
            background: linear-gradient(135deg, #4f46e5, #7c3aed);
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1030;
        }

        .top-navbar .navbar-brand {
            font-size: 1.3rem;
            letter-spacing: 0.5px;
            font-weight: 700;
        }

        .top-navbar .nav-link {
            color: rgba(255,255,255,0.85) !important;
            padding: 0.5rem 1rem;
            border-radius: 6px;
            margin: 0 0.2rem;
            transition: all 0.2s;
        }

        .top-navbar .nav-link:hover,
        .top-navbar .nav-link.active {
            background: rgba(255,255,255,0.15);
            color: white !important;
        }


        .stats-card {
            border-radius: 15px;
            border: none;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: all 0.3s;
            overflow: hidden;
        }

        .stats-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.15);
        }

        .stats-card.primary {
            background: linear-gradient(135deg, #4f46e5, #7c3aed);
            color: white;
        }

        .stats-card.success {
            background: linear-gradient(135deg, #10b981, #059669);
            color: white;
        }

        .stats-card.warning {
            background: linear-gradient(135deg, #f59e0b, #d97706);
            color: white;
        }

        .stats-card.danger {
            background: linear-gradient(135deg, #ef4444, #dc2626);
            color: white;
        }

        .stats-icon {
            font-size: 3rem;
            opacity: 0.8;
        }

        .card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            background: white;
        }

        .card-header {
            background: linear-gradient(135deg, #f8f9fa, #e9ecef);
            border-bottom: 3px solid #4f46e5;
            border-radius: 15px 15px 0 0 !important;
            padding: 1.5rem;
        }

        .product-item {
            transition: all 0.2s;
            padding: 1rem;
            border-radius: 10px;
        }

        .product-item:hover {
            background-color: #f8f9fa;
            transform: scale(1.02);
        }

        .product-thumb {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 10px;
            border: 2px solid #e5e7eb;
        }

        .chart-container {
            position: relative;
            height: 300px;
        }

        .alert-item {
            border-left: 4px solid #f59e0b;
            background: #fffbeb;
            padding: 1rem;
            margin-bottom: 0.5rem;
            border-radius: 8px;
        }

        .page-header {
            background: white;
            border-radius: 15px;
            padding: 2rem;
            margin-bottom: 2rem;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
    </style>
</head>
<script>
    // 自动高亮当前页面的导航项
    document.addEventListener('DOMContentLoaded', function() {
        const currentPath = window.location.pathname;
        const navLinks = document.querySelectorAll('.top-navbar .nav-link');

        // 移除所有active类
        navLinks.forEach(link => link.classList.remove('active'));

        // 根据当前路径添加active类
        navLinks.forEach(link => {
            const href = link.getAttribute('href');
            if (currentPath === href ||
                (href !== '/dashboard' && currentPath.startsWith(href))) {
                link.classList.add('active');
            }
        });
    });
</script>

<body>

<nav class="navbar navbar-expand-lg navbar-dark top-navbar">
    <div class="container-fluid">
        <a class="navbar-brand fw-bold" href="/dashboard">
            <i class="bi bi-box-seam-fill me-2"></i>商品管理系统
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/dashboard">
                        <i class="bi bi-speedometer2"></i> Dashboard
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="/product/list">
                        <i class="bi bi-box"></i> 商品管理
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/category/list">
                        <i class="bi bi-tags"></i> 分类管理
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/log/list">
                        <i class="bi bi-clock-history"></i> 操作日志
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/doc">
                        <i class="bi bi-book"></i> API文档
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/test/user-info">
                        <i class="bi bi-person-check"></i> 用户信息
                    </a>
                </li>
            </ul>
            <div class="d-flex align-items-center">
                <!-- 用户信息 -->
                <div th:if="${currentUser}" class="me-3 text-white">
                    <small>欢迎,</small>
                    <strong th:text="${currentUser.realName ?: currentUser.username}"></strong>
                </div>
                
                <a href="/product/add" class="btn btn-light btn-sm me-2">
                    <i class="bi bi-plus-circle"></i> 新增商品
                </a>
                <a href="/druid" target="_blank" class="btn btn-outline-light btn-sm me-2">
                    <i class="bi bi-speedometer"></i> 监控
                </a>
                <!-- 登出按钮 -->
                <a href="/auth/logout" class="btn btn-outline-light btn-sm">
                    <i class="bi bi-box-arrow-right"></i> 登出
                </a>
            </div>
        </div>
    </div>
</nav>
<div class="container">
    <!-- 页面标题 -->
    <div class="page-header">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h1 class="mb-2">
                    <i class="bi bi-speedometer2 text-primary"></i> Dashboard
                </h1>
                <p class="text-muted mb-0">商品管理系统数据总览</p>
            </div>
            <div>
                <a href="/product/list" class="btn btn-primary">
                    <i class="bi bi-box-seam"></i> 商品管理
                </a>
                <a href="/product/add" class="btn btn-success">
                    <i class="bi bi-plus-circle"></i> 新增商品
                </a>
            </div>
        </div>
    </div>

    <!-- 统计卡片 -->
    <div class="row g-4 mb-4">
        <div class="col-md-3">
            <div class="stats-card primary p-4">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="mb-2 opacity-75">商品总数</h6>
                        <h2 class="mb-0" th:text="${statistics.totalProducts ?: 0}">0</h2>
                    </div>
                    <i class="bi bi-box-seam stats-icon"></i>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="stats-card success p-4">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="mb-2 opacity-75">总库存</h6>
                        <h2 class="mb-0" th:text="${statistics.totalStock ?: 0}">0</h2>
                    </div>
                    <i class="bi bi-inbox stats-icon"></i>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="stats-card warning p-4">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="mb-2 opacity-75">总销量</h6>
                        <h2 class="mb-0" th:text="${statistics.totalSales ?: 0}">0</h2>
                    </div>
                    <i class="bi bi-graph-up-arrow stats-icon"></i>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="stats-card danger p-4">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="mb-2 opacity-75">库存预警</h6>
                        <h2 class="mb-0" th:text="${statistics.lowStockCount ?: 0}">0</h2>
                    </div>
                    <i class="bi bi-exclamation-triangle stats-icon"></i>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <!-- 分类统计 -->
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-pie-chart me-2"></i>分类统计</h5>
                </div>
                <div class="card-body">
                    <div class="chart-container">
                        <div id="categoryChart" style="width: 100%; height: 300px;"></div>
                    </div>
                    <div class="mt-3">
                        <div th:each="stat : ${statistics.categoryStats}" class="d-flex justify-content-between align-items-center mb-2">
                            <span th:text="${stat.categoryName}"></span>
                            <span class="badge bg-primary" th:text="${stat.productCount} + ' 个'"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 销售趋势 -->
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-graph-up me-2"></i>销售趋势</h5>
                </div>
                <div class="card-body">
                    <div class="chart-container">
                        <div id="salesTrendChart" style="width: 100%; height: 300px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4 mt-1">
        <!-- 库存状态 -->
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-inbox me-2"></i>库存状态</h5>
                </div>
                <div class="card-body">
                    <div class="chart-container">
                        <div id="stockStatusChart" style="width: 100%; height: 250px;"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 热销商品 -->
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-fire me-2"></i>热销商品 Top 5</h5>
                </div>
                <div class="card-body">
                    <div th:each="product, iterStat : ${hotProducts}" class="product-item">
                        <div class="d-flex align-items-center">
                            <span class="badge bg-primary me-3" th:text="${iterStat.count}"></span>
                            <img th:src="${product.imageUrl ?: '/images/default-product.png'}" class="product-thumb me-3" alt="">
                            <div class="flex-grow-1">
                                <h6 class="mb-1" th:text="${product.productName}"></h6>
                                <small class="text-muted" th:text="${product.categoryName}"></small>
                            </div>
                            <div class="text-end">
                                <strong class="text-success d-block">¥<span th:text="${#numbers.formatDecimal(product.salePrice, 1, 2)}"></span></strong>
                                <small class="text-muted">销量: <span th:text="${product.salesCount}"></span></small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 库存预警 -->
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-exclamation-triangle me-2"></i>库存预警</h5>
                </div>
                <div class="card-body">
                    <div th:if="${#lists.isEmpty(lowStockProducts)}" class="text-center text-muted py-4">
                        <i class="bi bi-check-circle display-4 mb-3"></i>
                        <p>暂无库存预警商品</p>
                    </div>
                    <div th:each="product : ${lowStockProducts}" class="alert-item">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <strong th:text="${product.productName}"></strong>
                                <br>
                                <small class="text-muted">编码: <span th:text="${product.productCode}"></span></small>
                            </div>
                            <div class="text-end">
                                <span class="badge bg-warning">库存: <span th:text="${product.stockQuantity}"></span></span>
                                <br>
                                <small class="text-muted">预警值: <span th:text="${product.minStock}"></span></small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/6.0.0/echarts.min.js"></script>
<script th:inline="javascript">
    // 初始化所有ECharts图表
    document.addEventListener('DOMContentLoaded', function() {
        // 初始化分类统计图表
        initCategoryChart();
        
        // 初始化销售趋势图表
        initSalesTrendChart();
        
        // 初始化库存状态图表
        initStockStatusChart();
        
        // 监听窗口大小变化，调整图表大小
        window.addEventListener('resize', function() {
            window.categoryChart && window.categoryChart.resize();
            window.salesTrendChart && window.salesTrendChart.resize();
            window.stockStatusChart && window.stockStatusChart.resize();
        });
    });

    // 初始化分类统计图表
    function initCategoryChart() {
        const chartDom = document.getElementById('categoryChart');
        if (!chartDom) return;
        
        window.categoryChart = echarts.init(chartDom);
        
        // 从Thymeleaf获取分类统计数据
        const categoryData = /*[[${statistics.categoryStats}]]*/ [];
        const categoryStats = categoryData.map(item => ({
            name: item.categoryName,
            value: item.productCount
        }));
        
        const option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'horizontal',
                bottom: 0,
                data: categoryStats.map(item => item.name)
            },
            series: [
                {
                    name: '商品分类',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    center: ['50%', '45%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: categoryStats.map((item, index) => ({
                        ...item,
                        itemStyle: {
                            color: [
                                '#4f46e5',
                                '#10b981',
                                '#f59e0b',
                                '#ef4444',
                                '#8b5cf6'
                            ][index % 5]
                        }
                    }))
                }
            ]
        };
        
        window.categoryChart.setOption(option);
    }

    // 初始化销售趋势图表
    function initSalesTrendChart() {
        const chartDom = document.getElementById('salesTrendChart');
        if (!chartDom) return;
        
        window.salesTrendChart = echarts.init(chartDom);
        
        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            toolbox: {
                feature: {
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            legend: {
                data: ['销售额', '销售量']
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '销售额',
                    min: 0,
                    axisLabel: {
                        formatter: '{value} 元'
                    }
                },
                {
                    type: 'value',
                    name: '销售量',
                    min: 0,
                    axisLabel: {
                        formatter: '{value} 件'
                    }
                }
            ],
            series: [
                {
                    name: '销售额',
                    type: 'bar',
                    data: [20000, 49000, 70000, 23000, 25000, 76000],
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {offset: 0, color: '#4f46e5'},
                            {offset: 1, color: '#7c3aed'}
                        ])
                    }
                },
                {
                    name: '销售量',
                    type: 'line',
                    yAxisIndex: 1,
                    data: [20, 49, 70, 23, 25, 76],
                    itemStyle: {
                        color: '#10b981'
                    },
                    lineStyle: {
                        width: 3
                    },
                    symbol: 'circle',
                    symbolSize: 8
                }
            ]
        };
        
        window.salesTrendChart.setOption(option);
    }

    // 初始化库存状态图表
    function initStockStatusChart() {
        const chartDom = document.getElementById('stockStatusChart');
        if (!chartDom) return;
        
        window.stockStatusChart = echarts.init(chartDom);
        
        // 获取统计数据
        const totalStock = /*[[${statistics.totalStock ?: 0}]]*/ 0;
        const lowStockCount = /*[[${statistics.lowStockCount ?: 0}]]*/ 0;
        
        // 计算各状态库存数量
        const normalStock = Math.max(0, totalStock - lowStockCount * 10);
        const lowStock = lowStockCount * 10;
        const outOfStock = Math.max(0, lowStockCount * 2);
        
        const option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['正常库存', '库存预警', '缺货']
            },
            series: [
                {
                    name: '库存状态',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        {value: normalStock, name: '正常库存', itemStyle: {color: '#10b981'}},
                        {value: lowStock, name: '库存预警', itemStyle: {color: '#f59e0b'}},
                        {value: outOfStock, name: '缺货', itemStyle: {color: '#ef4444'}}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        
        window.stockStatusChart.setOption(option);
    }
</script>
</body>
</html>